<template>
  <div class="outputsTable">
    <div class="outputsTable-toolbar">
      <div class="menu-wrapper">
        <el-menu mode="horizontal" defaultActive="1" class="dg-view-menu">
          <el-menu-item index="1">
            <el-icon>
              <icon-font icon-class="afl-chushechanchu"></icon-font>
            </el-icon>
            {{ $t('wms.output') }}
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <div class="outputsTable-content">
      <div class="real-table-list">
        <div class="rank-list">
          <div class="list-item">
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 20%; font-size: 14px;">{{ $t('wms.outputCode') }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 20%; font-size: 14px;">{{ $t('wms.outputName') }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 20%;font-size: 14px;">{{ $t('wms.actuaOutputQty') }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 20%;font-size: 14px;">{{ $t('wms.imputedOutput') }}
            </div>
            <div class="list-item-filed text-center table-title" style="  flex: 0 0 20%;font-size: 14px;">{{ $t('wms.difference') }}</div>
          </div>
          <div class="list-item" v-for="(item, index) in data.outList" :key="index"
            @click="selectList(data.outList[index])">
            <div class="list-item-filed" style="  flex: 0 0 20%;">
              {{ item.materialCode || '-' }}
            </div>
            <div class="list-item-filed" style="flex: 0 0 20%;">{{ item.materialName || '-' }}
            </div>
            <div class="list-item-filed" style="flex: 0 0 20%;">
              <el-tag effect="plain" size="small" type="success">{{ item.totalQty || '-' }}</el-tag>
            </div>
            <div class="list-item-filed" style="flex: 0 0 20%;">
              <el-tag effect="plain" size="small" type="warning">{{ item.calculatedOutputQty || '-' }}</el-tag>
            </div>
            <div class="list-item-filed" style="flex: 0 0 20%;">
              <el-tag effect="plain" size="small" type="danger">{{ item.outputDifferences || '-' }}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch, onMounted, defineProps, defineEmits } from 'vue'
import iconFont from '@/components/IconFont/iconFont'
import { processInputOutput } from '@/api/mesApi'

const props = defineProps({
  lineCode: { type: String }
})

onMounted(() => {
  outInput()
  setTime()
})
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await outInput()
  }, 6000)
}
watch(() => [props.lineCode], () => {
  console.log(props.lineCode)
  outInput()
})

const data = reactive({
  currentPage: 1, // 当前页
  pagesize: 20, // 当前页
  outList: ''
})

const outInput = (materialCode) => {
  processInputOutput({
    page: data.currentPage,
    rows: data.pagesize,
    processCode: props.lineCode,
    materialCode: materialCode
  }).then(res => {
    if (materialCode) {
      return data.outList
    }
    if (res.data != null) {
      data.outList = res.data.outputList
    }
  })
}

const emits = defineEmits(['getChildren'])

const selectList = (item) => {
  console.log(item)
  outInput(item.materialCode)
  emits('getChildren', item)
}

</script>

<style scoped lang="scss">
.outputsTable {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-sizing: border-box;
  background-color: #fff;

  &-toolbar {
    height: 40px;
    box-sizing: border-box;

    .menu-wrapper {
      position: relative;
      display: flex;
      height: 40px;

      .dg-view-menu {
        width: 100%;
        padding-left: 20px;
      }
    }
  }

  &-content {
    flex: 1;
  }
}

.iconfont {
  font-size: 22px;
}

.rank-list {
  padding: 5px 10px 10px 10px;

  .list-item {
    display: flex;
    flex-direction: row;
    text-align: center;
    border-bottom: 2px dashed #eee;
    line-height: 25px;
    color: #909399;
    align-items: center;
    box-sizing: border-box;
    overflow: hidden;

    &-filed {
      box-sizing: border-box;
      overflow: hidden;
      line-height: 30px;
      font-size: 18px;
    }

    &:nth-child(1) {
      color: black;
      font-weight: 600;
      z-index: 9999;
    }

    &:nth-child(2) {
      color: #606266;
    }

    &:nth-child(3) {
      color: #909399;
    }

    &:nth-child(4) {
      color: #909399;

      .list-item-no {
        background: #C0C4CC;
      }
    }
  }
}
</style>
